<template>
	<div class="common-layout">
		<el-container>
			<!-- 侧边 -->
			<el-aside
				:width="asideWith"
				style="min-height: 100vh; background: white"
			>
				<div
					style="
						line-height: 60px;
						font-size: 20px;
						display: flex;
						width: 40px;
						height: 40px;
            margin: auto;
					"
				>
					<img src="@/assets/images/人脸识别.png" alt="" />
				</div>

				<!-- <el-menu :default-active="$route.path" :collapse="isCollapse" router>
        <el-menu-item>
            系统首页
        </el-menu-item>
        <el-sub-menu index="1">
            <template #title>
                <i class="el-icon-location"></i>
                <span>人员管理</span>
            </template>
            <el-menu-item index="/manageUser">学生信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <i class="el-icon-location"></i>
                <span>专业能力测试</span>
            </template>
            <el-menu-item index="2-1">测试</el-menu-item>
            <el-menu-item index="2-2">题库</el-menu-item>
            <el-menu-item index="2-3">学习报告</el-menu-item>
        </el-sub-menu>
        <el-menu-item>
           我的主页
        </el-menu-item>
    </el-menu> -->
				<div style="width: 100%;align-self:center;justify-content: center;">
					<el-menu
						:default-active="$route.path"
						background-color="white"
						text-color="black"
						active-text-color="skyblue"
					>
						<!--根据路由动态生成菜单-->
						<Menu :menuList="menuList"></Menu>
					</el-menu>
				</div>
			</el-aside>

			<el-container>
				<el-header style="margin-bottom: 16px">
					<i style="font-size: 26px; margin-top: 15px"></i>
					<!-- <el-breadcrumb separator="/" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">{{}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">
              课程管理
            </el-breadcrumb-item>
          </el-breadcrumb> -->

					<div
						style="
							flex: 1;
							display: flex;
							justify-content: flex-end;
							align-items: center;
						"
					>
						<el-dropdown
							placement="bottom"
							style="margin-right: 30px"
						>
							<img
								src="@/assets/images/1.png"
								style="width: 40px; height: 40px"
							/>
							<div
								style="
									display: flex;
									align-items: center;
									cursor: pointer;
								"
							></div>
							<template #dropdown>
								<el-dropdown-menu slot:dropdown>
									<el-dropdown-item @click="goHomePage">
										个人信息
									</el-dropdown-item>
									<el-dropdown-item>
										修改密码
									</el-dropdown-item>
									<el-dropdown-item>
										退出登录
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</el-header>
				<!-- 主体 -->
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup lang="ts">
import router from '@/router'
import { getMenuRoutes } from '@/utils/menuRoute'
import Menu from '@/components/layout/menu.vue'
// let isCollapse=false;
let asideWith = '200px'
// const handleCollapse=()=>{
//     isCollapse=!isCollapse;
//     asideWith=isCollapse?'64px':'200px';
//     console.log(isCollapse);
//     console.log(asideWith);
// }
const menuList = getMenuRoutes()
console.log(menuList)
function goHomePage() {
	router.push('/homePage')
}
</script>

<style scoped>
.el-header {
	box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
	display: flex;
	align-items: center;
}
</style>
